<template>
  <div>
    我是App
    {{ num }}
    <!-- 绑定自定义事件：方式一 -->
    <Child @xxx="handleAaa" @click.native="handleClick" @setNum="setNum" />
    <!-- 绑定自定义事件：方式二 -->
    <Son ref="sonRef" />
  </div>
</template>

<script>
import Child from "./Child.vue";
import Son from "./Son.vue";
export default {
  name: "App",
  components: {
    Child,
    Son,
  },
  methods: {
    handleAaa(...args) {
      console.log("handleAaa()", args);
    },
    handleClick() {
      console.log("handleClick()");
    },
    handleBbb() {
      console.log("handleAbb()");
    },
    setNum() {
      this.num++;
    },
  },
  data() {
    return {
      num: 0,
    };
  },
  mounted() {
    
    this.$refs.sonRef.$once("aaa", this.handleAaa);
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$refs.sonRef.$off("aaa", this.handleAaa);
  },
};
</script>

<style></style>
